<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>颜色选择器</title>
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/layui/css/layui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/common.css}"/>
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>预定义颜色项</legend>
                </fieldset>
                <div style="margin-left: 30px;">
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <div class="layui-input-inline" style="width: 120px;">
                                <input type="text" value="" placeholder="请选择颜色" class="layui-input" id="test-form-input">
                            </div>
                            <div class="layui-inline"  style="left: -11px;">
                            <div id="test-form"></div>
                        </div>
                        </div>
                    </form>
                    <div  id="show" class="show" style="height: 200px; width:200px;background-color: pink;margin-left:300px;">
                    </div>
                </div>
            </div>
        </div>
        <html th:include="website/footer"></html>
    </div>

    <script th:src="@{/plugins/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/js/main.js}" type="text/javascript" charset="utf-8"></script>

    <script>
        layui.use(['form','layer','colorpicker'], function(){
            var layer = layui.layer,
                $ = layui.$,
                laydate = layui.laydate,
                form =layui.form,
                colorpicker = layui.colorpicker;

            //表单赋值
            colorpicker.render({
                elem: '#test-form'
                ,color: '#1c97f5'
                ,predefine: true // 开启预定义颜色
                ,done: function(color){
                    $('#test-form-input').val(color);
                    $('#show').css('background-color', color);
                },change: function(color){
                    $('#test-form-input').val(color);
                    $('#show').css('background-color', color);
                }
            });
        });
    </script>
</body>
</html>